
class Popup {
  alert(params = { title: '默认标题', content: '默认内容' }){
    const options = {
      title: '默认标题'
    }
    if (typeof params === 'string') {
      options.content = params
    } else {
      options.title = params.title
      options.content = params.content
    }
    this.createDialog(options)
  }
  confirm(
    params = { title: '默认标题', content: '默认内容' },
    { btns } = { btns: ['确定', '取消'] },
    okCallback,
    cancelCallback
  ) {
    const options = {
      title: '默认标题'
    }
    if (typeof params === 'string') {
      options.content = params
    } else {
      options.title = params.title
      options.content = params.content
    }

    this.createDialog({
      ...options,
      btns,
      handleClick: [okCallback, cancelCallback]
    })
  
  }
  createDialog({ title, content, btns = ['确定'], handleClick }) {
    const dialogEl = document.createElement('div')
    dialogEl.className = 'dialog'
    const btnsStr = btns.map(v => `<button>${v}</button>`).join('')
    dialogEl.innerHTML = `
      <div class="dialog-content">
        <div class="dialog-header">${title} <span>x</span></div>
        <div class="dialog-center">${content}</div>
        <div class="dialog-btns">
          ${btnsStr}
        </div>
      </div>
    `
    document.body.appendChild(dialogEl)
    this.bindEvent(dialogEl, handleClick)
  }
  bindEvent(dialogEl, handleClick = []) {
    const closeBtn = dialogEl.querySelector('.dialog-header span')
    const btns = [...dialogEl.querySelectorAll('.dialog-btns button')]
    closeBtn.addEventListener('click', () => {
      document.body.removeChild(dialogEl)
    })
    btns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        handleClick[index] && handleClick[index]()
        document.body.removeChild(dialogEl)
      })
    })
  }
  
  msg(text, { icon, time = 2000 }) {
    const dialogEl = document.createElement('div')
    dialogEl.className = 'dialog-message'
    let iconStr = '<b style="color: green">失败图标</b>'
    if (icon === 1) {
      iconStr = '<b style="color: red">成功图标</b>'
    }
    dialogEl.innerHTML = iconStr + text
    document.body.appendChild(dialogEl)
    setTimeout(() => {
      document.body.removeChild(dialogEl)
    }, time)
  }
  load() {
    const dialogEl = document.createElement('div')
    dialogEl.className = 'loading'
    dialogEl.innerHTML = '<span>加载中</span>'
    document.body.appendChild(dialogEl)
    return dialogEl
  }
  close(el) {
    document.body.removeChild(el)
  }
}






// 初始化实例 
const popup = new Popup()

// popup.alert 调用示例
// 用法1 默认标题，默认字符串表示弹窗中提示的内容
// popup.alert('aaaa')

// 用法2 自定义标题和内容
// popup.alert({
//   // title表示弹窗中的标题
//   title: '自己设置标题',
//   // content表示弹窗中提示的内容
//   content: '弹窗内容'
// })


// popup.confirm 调用示例
// 用法1 默认字符串表示询问弹窗中的内容
// popup.confirm('操作成功')

// 用法2 自定义按钮文字和事件
// popup.confirm(
//   {
//     // title表示询问弹窗的标题
//     title: '标题1111',
//     // content表示询问弹窗的内容
//     content: '操作成功22222'
//   }, 
//   {
//     // btn表示，两个按钮分别显示的内容
//     btns: ['ok', 'no']
//   }, 
//   function () {
//     // 第一个函数，表示点击了ok按钮要执行的代码
//     alert('点击了ok')
//   }, 
//   function () {
//     // 第二个函数，表示点击了no按钮要执行的代码
//     alert('点击了no')
//   }
// )


// // popup.msg 调用示例
// // 用法1 默认样式，2s自动关闭
// popup.msg('提示的内容')

// // 用法2 设置图标
// popup.msg('成功状态', {
//   // icon：0表示失败，1表示成功
//   icon: 1
// })

// // 用法3 自定义关闭时间
// popup.msg('失败状态，5s后关闭', {
//     icon: 0,
//     // time表示自动在多少毫秒之后消失
//     time: 5000
// })


// // popup.load 调用示例
// // 返回关闭的变量
const loading = popup.load();
setTimeout(function () {
  // 关闭loading
  popup.close(loading)
}, 5000)